<template>
  <div>
    <el-container>
      <el-header>
        <h1>消息发送管理</h1>
      </el-header>

      <el-main>
        <!-- 通过用户ID发送消息 -->
        <el-card class="box-card">
          <h2>给指定用户发送消息</h2>
          <el-form
            ref="userMessageForm"
            :model="userMessage"
            label-width="120px"
          >
            <el-form-item label="用户ID">
              <el-input
                v-model="userMessage.authId"
                placeholder="请输入用户ID"
              />
            </el-form-item>
            <el-form-item label="消息标题">
              <el-input
                v-model="userMessage.title"
                placeholder="请输入消息标题"
              />
            </el-form-item>
            <el-form-item label="消息内容">
              <el-input
                type="textarea"
                v-model="userMessage.message"
                placeholder="请输入消息内容"
                rows="3"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="sendToUser">发送消息</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 给活动报名用户发送消息 -->
        <el-card class="box-card">
          <h2>给活动报名用户发送消息</h2>
          <el-form
            ref="activityMessageForm"
            :model="activityMessage"
            label-width="120px"
          >
            <el-form-item label="选择活动">
              <el-select
                v-model="activityMessage.eventId"
                placeholder="请选择活动"
              >
                <el-option
                  v-for="event in events"
                  :key="event.id"
                  :label="event.name"
                  :value="event.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="消息标题">
              <el-input
                v-model="activityMessage.title"
                placeholder="请输入消息标题"
              />
            </el-form-item>
            <el-form-item label="消息内容">
              <el-input
                type="textarea"
                v-model="activityMessage.message"
                placeholder="请输入消息内容"
                rows="3"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="sendToActivityUsers"
                >发送消息</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 发送记录展示 -->
        <el-card class="box-card">
          <h2>发送记录</h2>
          <el-table :data="history" border style="width: 100%">
            <el-table-column prop="name" label="接收对象" width="200" />
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="message" label="内容" />
            <el-table-column prop="createdAt" label="发送时间" width="200" />
          </el-table>
          <!-- 添加分页组件 -->
          <div style="text-align: right; margin-top: 10px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="searchModel.pageNo"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="searchModel.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            />
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>
  
  
<script>
import messageApi from "@/api/messageManage"; // 替换为消息管理的 API 路径
export default {
  data() {
    return {
      userMessage: {
        authId: "",
        title: "",
        message: "",
      },
      activityMessage: {
        eventId: null,
        title: "",
        message: "",
      },
      events: [], // 活动列表
      history: [], // 历史消息记录
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  methods: {
    // 获取活动列表
    fetchEvents() {
      messageApi
        .getEvents()
        .then((response) => {
          this.events = response.data;
        })
        .catch((error) => {
          console.error("获取活动列表失败", error);
        });
    },
    // 获取消息历史记录
    fetchHistory() {
      messageApi
        .getHistory(this.searchModel)
        .then((response) => {
          this.history = response.data.list.map((item) => {
            return {
              name: item.name,
              title: item.title,
              message: item.message,
              createdAt: item.createdAt.replace("T", " "),
            };
          });
          this.total = response.data.total;
        })
        .catch((error) => {
          console.error("获取消息历史失败", error);
        });
    },
    // 发送消息给用户
    sendToUser() {
      this.$refs.userMessageForm.validate((valid) => {
        if (valid) {
          messageApi
            .sendToUser(this.userMessage)
            .then(() => {
              this.$message.success("消息发送成功");
              this.fetchHistory();
              this.clearForm("userMessage");
            })
            .catch((error) => {
              console.error("发送用户消息失败", error);
            });
        } else {
          this.$message.error("请填写完整的消息信息");
        }
      });
    },
    // 发送消息给活动报名用户
    sendToActivityUsers() {
      this.$refs.activityMessageForm.validate((valid) => {
        if (valid) {
          messageApi
            .sendToActivityUsers(this.activityMessage)
            .then(() => {
              this.$message.success("消息发送成功");
              this.fetchHistory();
              this.clearForm("activityMessage");
            })
            .catch((error) => {
              console.error("发送活动消息失败", error);
            });
        } else {
          this.$message.error("请填写完整的消息信息");
        }
      });
    },
    // 清空表单
    clearForm(formName) {
      this[formName] =
        formName === "userMessage"
          ? { authId: "", title: "", message: "" }
          : { eventId: null, title: "", message: "" };
      this.$refs[`${formName}Form`].clearValidate();
    },
    // 分页改变
    handleSizeChange(newSize) {
      this.searchModel.pageSize = newSize;
      this.searchModel.pageNo = 1;
      this.fetchHistory();
    },
    handleCurrentChange(newPage) {
      this.searchModel.pageNo = newPage;
      this.fetchHistory();
    },
  },
  mounted() {
    this.fetchEvents();
    this.fetchHistory();
  },
};
</script>

  <style scoped>
.box-card {
  margin-bottom: 20px;
}

.el-header {
  background-color: #409eff;
  color: white;
  text-align: center;
  line-height: 25px;
  font-size: 18px;
}

.el-main {
  padding: 20px;
}

h2 {
  font-size: 16px;
  margin-bottom: 10px;
}
</style>
  